<template>
  <!-- 订单模板 -->
  <el-dialog
    top="15vh"
    :title="isEdit ? $t('equipmentManagement.shebei54') : $t('equipmentManagement.shebei55')"
    :visible.sync="dialogShow"
    width="561px"
    height="262px"
    :close-on-click-modal="false"
  >
    <div class="template_inner">
      <el-form
        ref="form"
        label-position="top"
        label-width="100px"
        :model="form"
        :size="formItemSize"
      >
        <el-form-item :label="$t('equipmentManagement.shebei56')">
          <el-select
            v-model="form.orderTemplateType"
            style="width: 320px"
            :placeholder="$t('equipmentManagement.shebei57')"
          >
            <el-option :label="$t('equipmentManagement.shebei58')" :value="1" />
            <el-option :label="$t('equipmentManagement.shebei59')" :value="2" />
          </el-select>
        </el-form-item>
        <!-- 固定模板 -->
        <div v-if="form.orderTemplateType == '1'" class="fixed_template">
          <el-form-item :label="$t('equipmentManagement.shebei60')">
            <el-select
              v-model="form.name"
              style="width: 320px"
              :placeholder="$t('equipmentManagement.shebei57')"
              @change="templateChangeHandle"
            >
              <el-option
                v-for="(item, index) in templateList"
                :key="index"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-for="(item, index) in form.propList" :key="index" :label="item.propName">
            <el-input
              v-model="item.propValue"
              disabled
              style="width: 320px"
              :placeholder="$t('equipmentManagement.shebei57')"
            />
          </el-form-item>
        </div>

        <!-- 定制模板 -->
        <div v-if="form.orderTemplateType == '2'" class="custom_template">
          <el-form-item :label="$t('equipmentManagement.shebei60')">
            <el-input
              v-model="form.name"
              style="width: 200px"
              :placeholder="$t('equipmentManagement.shebei62')"
            />
            <el-button
              style="margin-left: 50px"
              type="text"
              :size="optionButtonSize"
              icon="el-icon-plus"
              @click="typeAddHandle"
              >{{ $t('equipmentManagement.shebei63') }}</el-button
            >
          </el-form-item>

          <div v-for="(item, index) in form.propList" :key="index" class="item_type">
            <div style="display: flex; align-items: center">
              <span>{{ $t('equipmentManagement.shebei64') }}{{ index + 1 }}</span>
              <el-button
                style="margin-left: 250px"
                type="text"
                :size="optionButtonSize"
                @click="customTypeDelHandle(index)"
                >{{ $t('equipmentManagement.shebei65') }}</el-button
              >
            </div>
            <div>
              <div class="item_input">
                <el-input
                  v-model="item.propName"
                  class="input"
                  :placeholder="$t('equipmentManagement.shebei66')"
                />
              </div>
              <div class="item_input">
                <el-input
                  v-model="item.propValue"
                  class="input"
                  style="width: 320px; height: 25px; line-height: 30px"
                  :placeholder="$t('equipmentManagement.shebei67')"
                />
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button plain :size="optionButtonSize" @click="cancleHandle">{{
        $t('equipmentManagement.shebei68')
      }}</el-button>
      <el-button type="primary" :size="optionButtonSize" @click="submitHandle">{{
        $t('equipmentManagement.shebei69')
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'BLZMasterIndex',
  props: {},
  data() {
    return {
      isEdit: true,
      dialogShow: false,
      form: {
        relateTemplateId: '', // 选择模板id
        creatorDeptId: '',
        orderTemplateType: '', // 模板类型
        name: '', // 订单模版
        propList: [],
      },
      // 先新建模板 再选择不同的模板，动态获取
      templateList: [],
    };
  },

  mounted() {
    console.log('this.$store.state.user.deptId-----', this.$store.state.user.deptId);
    this.getTemplate();
  },

  methods: {
    // 定制模板 添加类型
    typeAddHandle() {
      const obj = { propName: '', propValue: '' };
      this.form.propList.push(obj);
    },
    // 定制模板 删除
    customTypeDelHandle(index) {
      this.form.propList.splice(index, 1);
    },
    // 固定模板名称选择模板变化
    templateChangeHandle(value) {
      const obj = this.templateList.find(function (item) {
        return item.name == value;
      });
      this.form.propList = obj.propList;
      this.form.relateTemplateId = obj.id;
    },
    // 拿订单模板数据
    getTemplate() {
      this.$http
        .get('/orderTemplate/page?orderTemplateType=2')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.templateList = res.data.list.list;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 拿编辑数据
    getorderTemplate(id) {
      this.$http
        .get(`/orderTemplate/info/${id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 取消
    cancleHandle() {
      this.dialogShow = false;
      this.form = {
        creatorDeptId: '',
        orderTemplateType: '', // 模板类型
        name: '', // 订单模版
        propList: [],
      };
    },
    // 添加
    submitHandle() {
      if (this.form.orderTemplateType == 2) {
        delete this.form.relateTemplateId;
      }
      this.form.creatorDeptId = this.$store.state.user.deptId;
      this.$http
        .post('/orderTemplate/saveOrUpdate', this.form)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success(this.$t('equipmentManagement.shebei70'));
            this.$emit('getOrderTemplate');
            this.dialogShow = false;
            this.form = {
              creatorDeptId: '',
              orderTemplateType: '', // 模板类型
              name: '', // 订单模版
              propList: [],
            };
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss">
.item_type {
  margin-top: 15px;
}

.item_input {
  margin-top: 15px;
  // linhe
}

.item_input .el-input__inner {
  width: 320px;
  height: 28px;
}
</style>
